<template>
  <el-dialog title="通知公告——查看" :visible="visible" width="60%" @close="close">
    <div v-loading="loading" style="border:1px solid #EBEEF5;padding-left:5px" class="view">
      <!-- <div style="height:26px;line-height:26px;font-size:16px;font-wieght:bold;"><span>公告详情</span></div> -->
      <el-scrollbar style="width:100%">
        <el-row style="width:99%">
          <el-col :span="24">
            <div
              style="width:99%; line-height:28px;padding:15px;text-align:center;font-size:24px"
            >{{ entityData.title }}</div>
            <div
              style="width:99%;text-align:center;font-size:14px;line-height:28px;"
            >发布时间： {{ dateFormatter.formatUTCDate(entityData.publishTime) }} &nbsp;&nbsp; 发布人： {{ entityData.publisher }} &nbsp;&nbsp; 访问量： {{ entityData.readCount }}</div>
            <div style="width:99%;border:1px solid #EBEEF5;margin:0px 0px 20px 0px;">
              <div style="padding:10px 10px 10px 10px" v-html="entityData.content" />
            </div>
            <div>
              <attachment-viewer
                ref="attachmentViewer"
                :entity-id="entityData.id"
                :show-delete="false"
              />
            </div>

            <div>
              <el-button
                type="default"
                style="float:right;margin:20px 20px 20px 0px;"
                @click="close"
              >关闭</el-button>
            </div>
          </el-col>
        </el-row>
      </el-scrollbar>
    </div>
  </el-dialog>
</template>

<script>
import AttachmentViewer from '@/modules/support/view/attachment/AttachmentViewer'
export default {
  name: 'notice-view',
  components: { AttachmentViewer },
  data() {
    return {
      entityData: {
      },
      loading: false,
      visible: false

    }
  },
  methods: {
    show(id) {
      this.$api.support.notice.get(id)
        .then(res => {
          this.entityData = res.data
          this.visible = true
          // 更新阅读次数
          this.$api.support.notice.updateReadCount(id)
        })
    },
    // 关闭
    close() {
      this.visible = false
    }

  }
}
</script>

<style lang="scss" scoped>
.view {
  a,
  a:active {
    color: #10498f;
    text-decoration: none;
  }
  a:hover,
  a:focus {
    color: #05386b;
    text-decoration: underline;
  }
}
</style>
